import {useState} from "react";
let showCount = true;
export default   function BrokenCounter() {

  
  // 问题：条件调用导致顺序不一致
  if (showCount) {
    const [count, setCount] = useState(0); // 第1次调用（仅当 showCount 为 true 时）
  }
  
  const [message, setMessage] = useState("Hello"); // 第2次调用（或第1次，取决于 showCount）
  
  showCount = false; // 下次渲染时不调用第一个 useState
  
  return <div>
    {message}
    <button onClick={() => {showCount=false;setMessage('test')}}>test</button>
  </div>;
}
// ‌React中出现"Rendered fewer hooks than expected"错误的主要原因是组件在渲染过程中意外减少了Hooks的调用次数，导致前后渲染的Hooks数量不一致。
// Rendered fewer hooks than expected. This may be caused by an accidental early return statement.